import Vue from 'vue'

//二级组件
const component = {
  props: {
    active: Boolean,
    propOne: String
  },
  template: `
    <div>
      <input type="text" v-model="text"/>
      <span @click="handleChange">{{propOne}}</span>
      <!-- 在特定情况下会显示 see me if active -->
      <span v-show="active">see me if active</span>
    </div>
  `,
  //用方法的方法来传入数据
  data() {
    //return 会新建一个对象
    return {
      text: 0
    }
  },
  mounted () {
    console.log('comp mounted')
  },
  methods: {
    handleChange(){
      this.$emit('change')
    }
  }
}


const component2 = {

  // 继承自component, 先执行父类的 mounted 方法
  // 然后执行自己的 mounted 方法
  extends: component,

  // 覆盖父类的 data
  data () {
    return {
      text: 1
    }
  },

  //挂载
  mounted() {
    // 通过 this.$parent 是当前组件的父组件，
    // 并且data 可以直接修改
    // this.$parent.text='12345'
    console.log(this.$parent.$options.name)
  }
}

// 相当于一个子类
const CompVue = Vue.extend(component)

// new CompVue({
//   el: '#root',
//
//   // 不能用 props 覆盖组件的，只能用 propsData 给赋值
//   propsData: {
//     propOne: 'xxx'
//   },
//
//   //可以覆盖父类
//   data: {
//     text: '123'
//   },
//   mounted(){
//     console.log('instance mounted')
//   }
// })

const parent = new Vue({
  name: 'parent',
})

new Vue({
  parent: parent,
  name: 'Root',
  el: '#root',
  //挂载
  mounted() {
    // 通过 this.$parent 是当前组件的父组件，
    // 并且data 可以直接修改
    // this.$parent.text='12345'
    console.log(this.$parent.$options.name)
  },
  components: {
    Comp: component2
  },
  data: {
    text: '233333'
  },
  template: `
    <div>
      <span>{{text}}</span>
      <comp></comp>
    </div>
  `
})
